<!--
 表格组件
-->
<template>
  <div class="table-title">
    <a-button type="primary" @click="userClass.onShowModel(1)">添加</a-button>
  </div>
  <a-table
    :dataSource="userClass.data.list"
    :columns="userClass.data.columns"
    :loading="userClass.data.loading"
    :scroll="{ y: 320 }"
    :row-selection="{selectedRowKeys:userClass.data.selectedRowKeys,onChange:onSelectChange}"
    rowKey="id"
    :onChange="userClass.onChange"
    :pagination="false"
  >
    <template #action="{ record }">
      <a-popconfirm
        v-if="userClass.data.list.length"
        title="你确定要删除吗?"
        ok-text="确定"
        cancel-text="取消"
        @confirm="userClass.onDeleTabl(record.id)"
      >
        <a-tag color="pink">删除</a-tag>
      </a-popconfirm>

      <a-tag color="green" @click="userClass.onShowModel(2,record)">编辑</a-tag>
      <a-tag color="cyan" @click="userClass.onShowModel(3,record)">查看</a-tag>
    </template>
  </a-table>
  <div class="pagination">
    <a-pagination
      show-size-changer
      show-quick-jumper
      v-model:current="userClass.data.pageNum"
      :show-total="(total) => `总共 ${total} 条`"
      :pageSizeOptions="userClass.data.pageSizeOptions"
      :total="userClass.data.total"
      @change="userClass.onPagination"
      @showSizeChange="userClass.onShowSizeChange"
    >
      <template #itemRender="{ page, type, originalElement }">
        <a v-if="type === 'prev'">上一页</a>
        <a v-else-if="type === 'next'">下一页</a>
        <renderVNode v-else :vnode="originalElement"></renderVNode>
      </template>
      <template #buildOptionText="props">
        <span v-if="props.value !== 'userClass.data.total'"
          >{{ props.value }}条/页</span
        >
        <span v-else>全部</span>
      </template>
    </a-pagination>
  </div>
  <div>
    <a-button @click="userClass.onSelectChangeAll(userClass.data.selectedRowKeys)"
      >全选</a-button
    >
    <a-button class="button" @click="userClass.onDeselect()">取消选择</a-button>
    <a-button type="primary" danger @click="userClass.onModal('你确定要删除此项数据吗？')"
      >删除</a-button
    >
 </div>

  <!--添加账号-->
  <a-modal title="添加账号" v-model:visible="userClass.data.isAdd" :footer="null">
    <v-add></v-add>
  </a-modal>

 <!--编辑修改账号-->
  <a-modal title="修改账号" v-model:visible="userClass.data.isEdit" :footer="null">
    <v-edit></v-edit>
  </a-modal>

    <!--查看账号-->
    <a-drawer
        title="账号详情"
        :width="720"
        v-model:visible="userClass.data.isDetails" 
        :body-style="{ paddingBottom: '80px' }"
        @close="userClass.onModelCancel(3)"
      >
       <v-details></v-details>
    </a-drawer>


</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import { Button,Table,Pagination,Popconfirm,Tag,Drawer,Modal,Checkbox} from "ant-design-vue";

import vAdd from "./vAdd.vue";
import vEdit from "./vEdit.vue";
import vDetails from "./vDetails.vue";

import {userClass} from "@/modules/user/user";

export default defineComponent({
  components: {
    [Button.name]:Button,
    [Table.name]:Table,
    [Pagination.name]:Pagination,
    [Popconfirm.name]:Popconfirm,
    [Tag.name]:Tag,
    [Drawer.name]:Drawer,
    [Modal.name]:Modal,
    [Checkbox.name]:Checkbox,
    renderVNode:userClass.renderVNode,
    vAdd,
    vEdit,
    vDetails
  },
  setup() {
   const onSelectChange = (selectedRowKeys: Key[]) => { //选择表格处理row-selection不能userClass.onSelectChange的坑
      userClass.onSelectChange(selectedRowKeys)
    };
    return {
      userClass,
      onSelectChange
    };
  },
});
</script>

<style lang="scss" scoped>
.button {
  margin: 0 10px;
}
</style>